<template>
  <div>
    <Waterfall :list="lisimg" :breakpoints="breakpoints">
      <template #item="{ item, url, index }">
        <div class="card">
          <LazyImg :url="url"> </LazyImg>
        </div>
      </template>
    </Waterfall>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import frist from '../../assets/pubu/1.jpg'
import second from '../../assets/pubu/2.jpg'
import third from '../../assets/pubu/3.jpg'
import fourth from '../../assets/pubu/4.jpg'
import fifth from '../../assets/pubu/5.jpg'
import sixth from '../../assets/pubu/6.jpg'
import seventh from '../../assets/pubu/7.jpg'
import eighth from '../../assets/pubu/8.png'
import ninth from '../../assets/pubu/9.jpg'
import tenth from '../../assets/pubu/10.jpg'
import eleven from '../../assets/pubu/11.png'
import twelve from '../../assets/pubu/12.png'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/style.css'
const lisimg = ref([
  { src: frist, id: 1 },
  { src: second, id: 2 },
  { src: third, id: 3 },
  { src: fourth, id: 4 },
  { src: fifth, id: 5 },
  { src: sixth, id: 6 },
  { src: seventh, id: 7 },
  { src: eighth, id: 8 },
  { src: ninth, id: 9 },
  { src: tenth, id: 10 },
  { src: third, id: 11 },
  { src: fourth, id: 12 },
  { src: sixth, id: 13 },
  { src: fifth, id: 14 },
  { src: seventh, id: 15 },
  { src: eighth, id: 16 },
  { src: ninth, id: 17 },
  { src: tenth, id: 18 },
  { src: sixth, id: 19 },
  { src: seventh, id: 20 },
  { src: eighth, id: 21 },
  { src: ninth, id: 22 },
  { src: tenth, id: 23 },
  { src: sixth, id: 24 },
  { src: seventh, id: 25 },
  { src: eighth, id: 26 },
  { src: ninth, id: 27 },
  { src: tenth, id: 28 },
  { src: tenth, id: 29 },
  { src: sixth, id: 30 },
  { src: eleven, id: 31 },
  { src: twelve, id: 32 },
])
const breakpoints = {
  1200: {
    //当屏幕宽度小于等于1200
    rowPerView: 4,
  },
  800: {
    //当屏幕宽度小于等于800
    rowPerView: 3,
  },
  500: {
    //当屏幕宽度小于等于500
    rowPerView: 2,
  },
}
</script>

<style lang="scss" scoped></style>
